<template>
  <div>
    <!--    面包屑-->
    <div class="mianbaoxie">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="position:fixed;top: 13%">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城管理</el-breadcrumb-item>
        <el-breadcrumb-item>专题管理</el-breadcrumb-item>
        <el-breadcrumb-item>专题列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box_table">
      <!--查询的东西-->
      <div>
        <el-form >
          输入搜索:
          <el-input v-model="topicname" placeholder="专题名称/关键词" style="width: 25%"></el-input>
          <el-button type="primary" plain @click="loadData">搜索</el-button>
        </el-form>
      </div>
      <!--    表格-->

      <el-table
          :data="topicData"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="序号"
            width="100">
        </el-table-column>
        <el-table-column
            prop="number"
            label="编号"
            width="160">
        </el-table-column>
        <el-table-column
            prop="topicname"
            label="专题名称"
            width="160">
        </el-table-column>
        <el-table-column
            prop="ttype.typeName"
            label="专题类型"
            width="160">
        </el-table-column>
        <el-table-column
            prop="topictime"
            label="添加时间"
            width="160">
        </el-table-column>
<!--        <el-table-column label="专题图片" width="90">-->
<!--          <template v-slot="s" >-->
<!--            <el-button @click="clickSele(s.row.id)">查看</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
            prop="starttime"
            label="开始时间"
            width="160">
        </el-table-column>
        <el-table-column
            prop="endtime"
            label="结束时间"
            width="160">
        </el-table-column>
        <el-table-column
            prop="stat"
            label="专题状态"
            width="160"
            sortable>
          <template slot-scope="scope">
            <!--switch 开关 组件-->
            <el-switch
                @change="alterSwitch(scope.row)"
                :active-value="true"
                :inactive-value="false"
                v-model="scope.row.stat"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="topiclimit.limitname"
            label="专题类型"
            width="160">
        </el-table-column>
        <el-table-column label="操作" width="160" >
          <template v-slot="s" >
            <el-button type="primary" plain icon="el-icon-chat-dot-round" @click="clickSele(s.row)" circle size="small"></el-button>
            <el-button type="danger" plain icon="el-icon-delete" @click="clickDelBtn(s.row.id)" circle size="small"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="查看h5页面" :visible.sync="isSelectl" center width="37%">
        <div class="HeZi" v-if="sortData!=0" >
          <el-row>
            <el-col :span="8" v-for="(item,i) in sortData">
              专题图片：
              <img :src="item.topiclname" class="image">
              <div>
              专题链接：
              <el-input v-model="item.topiclink"></el-input>
              </div>
            </el-col>
          </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="quxiao()">取 消</el-button>
          <el-button type="primary" @click="updateColumn()">确 定</el-button>
        </div>
      </el-dialog>
    </div>


      <el-dialog   title="查看专题页面" :visible.sync="isSelectl1">

        <p >专题名称：{{brandsAll.topicname}}</p>
        专题图片：
        <img :src="brandsAll.imtopic.topiclname" class="image">
        <div>

          <p >专题链接：{{brandsAll.imtopic.topiclink}}</p>
        </div>

        所选商品：
        <el-row>
        <el-col :span="6" v-for="(item,i) in brandsAll.itemsList">
          <div>
            <img style="margin: 0 auto ; height: 50px ; width: 75px" :src="item.itemThumbnail" class="avatar">
            <p style="text-align: center">{{item.itemName}}</p>
          </div>
        </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button @click="quxiaoym()">取 消</el-button>
          <el-button type="primary" @click="quxiaoym()">确 定</el-button>
        </div>
      </el-dialog>


  </div>
</template>

<script>
export default {
  data(){
    return{
      isSelectl1:false,
      topicImgList:[],
      topicData:[],
      topicname:"",
      isSelectl:false,
      sortData:[],
      brandsAll:{
        imtopic: {
          topiclink:"",
          topiclname:'',
        },
        itemsList:[],
        topicname:''

      }

    }
  },
  created(){
    this.loadData()
  },
  methods: {
    clickDelBtn(id){
      this.$confirm('确定要删除该栏目', {
        confirmButtonText: '确定',
        cancelButtonText: '再想想',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: "get",
          url: "topic/delTopic",
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.sceneInfoVisible = false
            this.loadData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    loadData() {
      this.$axios.get("topic/getTopic", {params: {topicname: this.topicname}}).then(res => {
        this.topicData = res.data.data
      })
    },
    updateColumn(){
      console.log(this.sortData)
      this.$axios({
        method: "post",
        url: "topic/uph5topic",
        data: this.sortData
      }).then(res => {
        if (res.data.code == 200) {
          alert("修改成功")
          this.isSelectl = false;
          this.loadData()
        } else {
          alert("修改失败")
          this.isSelectl = false
          this.loadData()
        }
      })
    },
    quxiao(){
      this.isSelectl=false
    },
    clickSele(data){
      this.topicImgList = data
      console.log(this.topicImgList)
      if (this.topicImgList.topictype == 1){
        this.isSelectl=true
        this.$axios.get("topic/getImopic",{params:{id:this.topicImgList.id}}).then(res=>{
          this.sortData=res.data.data
        })
      }else if (this.topicImgList.topictype == 2){
        this.isSelectl1=true
        this.topicImgList = data
        console.log(this.topicImgList.id)
        this.$axios({
          method: "get",
          url: "topic/findYmItem",
          params: {
            id: this.topicImgList.id
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.brandsAll = res.data.data

          }
        })
      }
    },

    quxiaoym(){
      this.isSelectl1=false;
    },
    alterSwitch(row){
      console.log(row)
      this.$axios.post("topic/updTopic",{id:row.id,stat:row.stat}).then(res=>{
        this.$message({
          type: 'success',
          message: '你成功修改了显示!'
        });
      })
    },
  }
}
</script>

<style scoped>

</style>